<template>
  <div class="m-page-main" style="height: auto">
    <ul class="car-list">
      <li v-for="car in list" :key="car.id">
        <img :src="car.logoimage" class="car-list-img" />
        <div class="car-list-title">{{ car.title }}</div>
        <div class="car-list-id">ID: {{car.id}}</div>
        <div class="car-list-more" @click="goDetail(car.id)">查看详情>>></div>
      </li>
      <li v-if="!loading && list.length === 0"> 暂无车队</li>
    </ul>
    <Pagination
      class="mu-page"
      :hide-on-single-page="true"
      background
      layout="prev, pager, next"
      :total="total"
    >
    </Pagination>
  </div>
</template>
<script>
import { Pagination } from "element-ui";
import { mycmsmotorcade } from "@/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      loading: false,
      page: 1,
      limit: 10,
      total: 0,
      list: []
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      mycmsmotorcade({}).then((res) => {
        console.log(res)
        this.list = res.data.data.rows
        this.total = res.data.data.total
      });
    },
    goDetail (id) {
      this.$router.push({
        path: `/mc_manager/${id}/info`
      })
    }
  },
};
</script>
<style scoped>
.m-page-main {
  width: 995px;
  float: right;
  margin-right: 2px;
}

.car-list {
  border-radius: 10px;
}
.car-list li {
  color: #7d7d7d;
  font-size: 18px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2.5px 4.33px 10px 0px rgb(0, 0, 0, 0.2);
  padding: 25px 30px 25px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
}
.car-list li:nth-child(1) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.car-list li:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.car-list li img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 10px;
}
.car-list-title,
.car-list-id {
  flex: 1;
}
.car-list-id {
  font-size: 14px;
  color: #535353;
}
.car-list-more {
  font-size: 14px;
  color: #3f87f5;
}
.car-list-title {
  color: #313131;
}
.title span {
  font-size: 16px;
  color: #7d7d7d;
  float: right;
}
.meta {
  line-height: 40px;
}
.mu-page {
  padding: 20px 0;
}
</style>
